<template>
  <el-menu mode="vertical" @select="handleSelect" :default-active="activeName" class="full">
    <el-menu-item index="train">火车票</el-menu-item>
    <el-menu-item index="flight">机票</el-menu-item>
    <el-menu-item index="hotel">酒店</el-menu-item>
    <el-menu-item index="scenic">景区</el-menu-item>
  </el-menu>
</template>

<script setup>
import router from '~/config/router';
import {useRoute} from "vue-router";
import {ref, watch} from "vue";
import {getProductType} from "~/config/utils.js";

const outProp = defineProps({
  beforeUrl: {type: String, default: ""},
  afterUrl: {type: String, default: ""}
})
const nowRoute = useRoute()
const activeName = ref(nowRoute.params.productTypeStr)
watch(() => nowRoute.params.productTypeStr, () => {
  activeName.value = nowRoute.params.productTypeStr
})


const handleSelect = (index) => {
  router.push(outProp.beforeUrl + index + outProp.afterUrl)
};

defineExpose({
  activeName
})
</script>
